<template>
	<view class="gridCategory"
		:style="'grid-template-columns: repeat(' + col + ', minmax(0, 1fr));background: ' + background + ';'">
		<block v-for="(item, index) in datas" :key="index">
			<view class="gridCategory-body" @click.stop="onclick(item)">
				<block v-if="showStyle.up.type === 'showImage'">
					<image class="gridCategory-body-image" mode="aspectFit" :src="item.thumbnail | ImageSrc" />
				</block>
				<block v-if="showStyle.up.type === 'showIconfont'">
					<view class="iconfont" :class="item.thumbnail"></view>
				</block>
				<block v-if="showStyle.up.type === 'showNumber'">
					<view class="gridCategory-body-number">
						{{item.thumbnail}}
					</view>
				</block>
				<block v-if="showStyle.down.type === 'showText'">
					<view class="gridCategory-body-name ">{{ item.name }}</view>
				</block>
			</view>
		</block>
		<!-- 补充分类，多用于全部分类等特殊情况 -->
		<slot></slot>
	</view>
</template>

<script>
	import Constants from '@/constants';
	//网格布局分类组件
	//@group 业务组件
	export default {
		//
		name: 'gridCategory',
		//
		mixins: [Constants],
		//
		props: {
			/**
			 * 显示风格
			 * showStyle.up.type等于showImage，则item.thumbnail显示图片（image标签格式）
			 * showStyle.up.type等于showIconfont，则item.thumbnail显示图片（iconfont名称格式），可写样式
			 * showStyle.up.type等于showNumber，则item.thumbnail显示数字
			 * showStyle.down.type等于showText，则item.name显示
			 */
			showStyle: {
				type: Object,
				default: function() {
					return {
						up: {
							type: 'showImage'
						},
						down: {
							type: 'showText'
						}
					};
				}
			},
			//分类显示几列
			col: {
				type: [String, Number],
				default: '4'
			},
			//分类的数据集合
			datas: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
			//
			background: {
				type: String,
				default: '#fff'
			},
		},
		//
		methods: {
			onclick(item) {
				//点击分类后回调
				//@arg 向父组件传递分类对象（item）
				this.$emit('gridCategory:click', item)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.gridCategory {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.5rem;
		// background: #fff;
		place-items: center;
		padding: $xj-standard-padding;
		width: 100%;

		.gridCategory-body {
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			justify-content: flex-start;
			text-align: center;

			.gridCategory-body-image {
				width: 120rpx;
				height: 120rpx;
			}

			.gridCategory-body-number {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
			}

			.gridCategory-body-name {
				margin-top: 12rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-primary;
				font-weight: 400;
			}
		}
	}
</style>